<template>
	<view class="wrap-item" v-if="item">
		<view class="flex align-center just-between">
			<view class="title-bg flex">
				<view class="must" v-if="item.require">
					*
				</view>
			
				<view class="title">
					{{ item.title }}
				</view>
			</view>
			
			<view class="group-list flex align-center just-end">
				<block v-for="(groupItem, index) in item.list" :key="index">
					<view class="group-item flex align-center"
						@click="$emit('input', groupItem.id)"
					>
						<view class="group-choose">
							<image
								v-if="value === groupItem.id"
								class="group-img"
								:src="$staticImagePath('common/choose_selects.png')"
							/>
							
							<image
								v-else
								class="group-img"
								:src="$staticImagePath('common/choose_normal.png')"
							/>
						</view>
			
						<view class="group-name">
							{{ groupItem.title }}
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
		},
	};
</script>

<style>
	@import "../css/form.css";
</style>
